<template>
  <el-header>
  <div style="width: 100%">
    <navigator></navigator>
  </div>
  </el-header>
  <el-container>
    <el-aside>
      <h3 class="title">个人中心</h3>
      <el-menu
        :uniqueOpened="true"
        :default-active="$route.path"
        router
        class="el-menu-vertical-demo"
        background-color="#ffffff"
        text-color="#000000"
        active-text-color="#003399">
        <el-menu-item index="/basicInformation">
          <template #title>
            <span>基本信息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/purse">
          <template #title>钱包</template>
        </el-menu-item>
        <el-menu-item index="/set">
          <template #title>设置</template>
        </el-menu-item>
        <el-menu-item index="/message">
          <template #title>消息提醒</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-card class="information">
        <div><h3 class="set">设置</h3></div>
        <el-form label-width="80px">
          <el-form-item label="头像" prop="avatar" v-model="setParams.avatar">
            <div class="demo-basic--circle">
              <div class="block"><el-avatar :size="70" src="https://img.zcool.cn/community/01abbd5631f64b32f8755701e053ed.jpg@1280w_1l_2o_100sh.jpg"></el-avatar></div>
            </div>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input
              class="nickName"
              name="nickname"
              type="text"
              :placeholder="setParams.nickname"
              v-model="setParams.nickname"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              class="mailBox"
              name="email"
              v-model="setParams.email">{{ setParams.email }}</el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              :disabled="true"
              v-model="setParams.mobile"
              class="phone"
              name="mobile"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="realName">
            <el-input
              :disabled="true"
              v-model="setParams.realName"
              class="name"
              name="realName"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio class="boy" label="男" v-model="setParams.gender" :disabled="true">男</el-radio>
            <el-radio class="girl" label="女" v-model="setParams.gender" :disabled="true">女</el-radio>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <div class="birthday">
            <el-date-picker
              v-model="setParams.birthday"
              type="date"
              size="large"
              placeholder="选择日期"
              :disabled="true">
            </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="个人简介" class="introduction" prop="userDescription">
          </el-form-item>
          <el-input
            v-model="setParams.userDescription"
            type="textarea"
            :rows="9"
            class="introText"
          prop="userDescription">{{ setParams.userDescription }}</el-input>
        </el-form>
        <el-button type="primary" class="button" @click="save">保存</el-button>
      </el-card>
    </el-main>
  </el-container>
</template>

<script lang="ts" src="./set.ts">
</script>

<style scoped>
.el-header{
  padding-inline-end: 0px;
  padding-inline-start: 0px;
}
.el-menu-vertical-demo{
  width: 250px;
  font-size: 30px;
}
.title{
  width: 200px;
  padding-left: 25px;
}
.information{
  height: auto;
  width: 900px;
  margin: 50px 100px;
}
.demo-basic--circle{
  position: absolute;
  left: 20px;
  top: -15px;
}
.nickName{
  width: 35%;
  padding-right: 475px;
}
.mailBox{
  width: 35%;
  padding-right: 475px;
}
.phone{
  width: 35%;
  padding-right: 475px;
}
.name{
  width: 35%;
  padding-right: 475px;
}
.boy{
  padding-left: 0px;
}
.girl{
  padding-right: 500px;
}
.birthday{
  position: absolute;
  margin: 0px 15px;
}
.introduction{
  position: absolute;
  margin: -395px 405px;
}
.introText{
  position: absolute;
  margin: -345px -10px;
  width: 350px;
}
.set{
  padding-right: 800px;
  padding-top: 0px;
  padding-bottom: 10px;
}
.button{
  width: 150px;
  position: absolute;
  margin: -70px 100px;
  background: #003399;
}
</style>
